<template>
  <el-container class="containerStyle">
    <el-container2 class="container2Style">
      <el-header class="headerStyle">
        <el-input
          v-model="input"
          class="inputStyle"
          placeholder="请输入订单号"
          prefix-icon="el-icon-search"
          clearable
          @click="focus(e)"
        />
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            class="dateStyle"
          />
        </div>
        <el-button round class="buttonStyle">查询</el-button>
      </el-header>
      <el-main>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          class="tableStyle"
        >
          <el-table-column
            prop="name"
            label="订单号"
            width="180"
          />
          <el-table-column
            prop="zhanghao"
            label="订单状态"
            width="180"
          />
          <el-table-column
            prop="tel"
            label="用户"
          />
          <el-table-column
            prop="state"
            label="手机号"
          />
          <el-table-column
            prop="state"
            label="地址"
          />
          <el-table-column
            prop="state"
            label="下单时间"
          />
          <el-table-column
            prop="state"
            label="实操金额"
          />
          <el-table-column
            prop="click"
            label="操作"
            class="lastStyle"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
              <el-button type="text" size="small" style="color:#FF0000" @click="changeState">禁用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="block">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          class="pageStyle"
          layout="total, sizes, prev, pager, next, jumper"
          :total="0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-container2>
  </el-container>
</template>

  <style lang="scss" scoped>
  .containerStyle{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, .05);
    .container2Style{
      position:relative;
      background-color:white;
      width: 100%;
      height: 100%;
      margin:15px 15px;
      .headerStyle{
        display: flex;
        position:relative;
        top:0;
        left:0;
        .inputStyle{
          width:200px;
          padding-top:20px;
        }
        .dateStyle{
            margin-top:20px;
            margin-left:20px;
        }
        .buttonStyle{
          margin-top:20px;
          margin-left:20px;
          background-color:pink;
        }
        .buttonStyle:hover{
          color:white;
        }
      }
      .pageStyle{
        margin:0 auto;
        padding-bottom:20px;
        text-align: center;
      }
    }
  }
  </style>
<script>
export default {
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
